<template>
  <view class="main">
    <!-- 用户购买的所有服务单 -->
    <view class="order-wrap">
      <view class="o-bg"></view>
      <!-- loading 为false表示已经发过请求，确实没有数据 -->
      <view class="order">
        <view class="pkg">
          <view class="p-user">
            <view class="p-u-logo">
              <image :src="personLogo" alt="" />
            </view>
            <view class="p-u-name">{{ inserviceInfo.insured.insuredName }}</view>
          </view>
          <view class="p-info">
            <view>
              <view class="p-i-name-w">
                <text class="p-i-name">{{ inserviceInfo.packageName }}</text>
                <text
                  class="p-i-status"
                  :style="{
                    background: serviceStatusColor[inserviceInfo.orderStatus]
                  }"
                  >{{ inserviceInfo.orderStatus | getOrderStatusName }}</text
                >
              </view>
              <!-- 服务订单状态 -->
              <!-- <view class="p-i-detail">
              <view class="p-i-level">{{ order.status | getOrderStatusName }}</view>
              <view class="p-i-time">已服务{{ serviceDays(order.serviceStartDate) }}天</view>
            </view> -->
              <!-- 服务效期，从保险订单中获取 -->
              <!-- <view class="p-i-peroid">
              服务效期:<view class="p-i-p-start">{{ inserviceInfo.serviceStartDate }}</view
              >至<view class="p-i-p-start">{{ inserviceInfo.serviceEndDate }}</view>
            </view> -->
              <!-- 只有待激活和待支付才显示该按钮 -->

              <view class="p-i-art">
                <view class="p-i-a-item" @click="goServiceOrderDetailPage(inserviceInfo)">服务套餐详情</view>
                <!-- <view
                v-if="inserviceInfo.inserviceArticleList.length"
                class="p-i-a-item"
                @click="showServiceArticleList(inserviceInfo)"
                >服务协议</view
              > -->
                <!-- 已支付，没有问询或者问询失败 -->
                <view v-if="showInsuranceButton(inserviceInfo)" class="p-i-active">
                  <view class="p-i-btn" @click="beActive(inserviceInfo)">激活</view>
                </view>
              </view>
            </view>

            <view
              v-if="
                surplusTime && inserviceInfo.orderStatus === 2 && inserviceInfo.payStatus === 0 && inserviceInfo.amount
              "
              class="p-i-pay"
            >
              <view class="p-i-p-tip"
                >该订单尚未支付，将在<text class="p-i-time">{{ surplusTime }}</text
                >后 自动撤销。</view
              >
              <view class="p-i-btn" @click="handleService(inserviceInfo)">支付</view>
            </view>
          </view>
        </view>

        <!-- 只有服务中的服务订单才显示服务产品，其他状态隐藏服务产品，点击下拉按钮才显示服务产品 -->
        <!-- <view>{{order.status + '' + showProducts[index]}}</view> -->
        <view v-if="inserviceInfo.packageProduct && inserviceInfo.packageProduct.length > 0" class="products">
          <view class="g-title">
            <view>所含产品 </view>
            <view class="cut-line"></view>
          </view>
          <view v-for="(item, index2) in inserviceInfo.packageProduct" :key="index2">
            <view>
              <view v-if="item.productType === 1" class="nppackageNameCss">
                <text>{{ inserviceInfo.npackageName }}</text>
              </view>
              <view v-else class="nppackageNameCss">
                <text>{{ item.productName }}</text>
              </view>
              <!-- 显示服务产品文档 -->

              <view v-if="item.productSpecs && item.productSpecs.length > 0" class="pro-article">
                <view v-for="(article, aIndex) in item.productSpecs" :key="aIndex" @click="lookArticle(article)">{{
                  article.name
                }}</view>
              </view>

              <!-- 保险类 -->

              <view v-if="item.productType === 1" class="goods">
                <view class="g-info">
                  <view class="g-i-name">
                    <text>{{ inserviceInfo.npackageName }}</text>
                    <text v-if="inserviceInfo.teamOrderStatusName" class="g-i-name-statusName">
                      {{ inserviceInfo.teamOrderStatusName }}
                    </text>
                  </view>
                  <view v-if="inserviceInfo.insuranceCompany" class="g-i-com">{{
                    inserviceInfo.insuranceCompany
                  }}</view>
                  <view v-if="inserviceInfo.startDate" class="g-i-peroid">
                    保险期限:<view class="g-i-p-start">{{ inserviceInfo.startDate || '' }}</view
                    >至<view class="g-i-p-start">{{ inserviceInfo.endDate || '' }}</view>
                  </view>
                  <view class="g-i-art">
                    <view class="g-i-a-item" @click="showInsureArticleList(inserviceInfo)">保险条款</view>
                    <view
                      v-if="
                        inserviceInfo.teamOrderStatus === 1 ||
                        inserviceInfo.teamOrderStatus === 3 ||
                        inserviceInfo.teamOrderStatus === 5
                      "
                      class="g-i-a-item"
                      @click="checkInsureCertificate(inserviceInfo)"
                      >保险凭证</view
                    >
                  </view>
                </view>
                <view v-if="inserviceInfo.showApplyBtn" class="g-apply" @click="goIllForm">申领保障金</view>

                <view
                  v-if="inserviceInfo.teamOrderStatus === 0 && inserviceInfo.healthEnquiries.length === 0"
                  class="g-apply"
                  @click="activeInsure(inserviceInfo)"
                  >登记保险</view
                >
                <view class="cut-line"></view>
              </view>

              <!-- 健管健教类 -->
              <!-- <view v-if="item.insuranceProductType === 3" class="fl-list"> -->
              <!--
              <view v-if="item.productType === 3" class="fl-list">
                <view class="fl-item">
                  <view style="display: flex">
                    <view class="fl-con">
                      <view class="fl-des">
                        <view class="fl-name">
                          {{ item.productName || '' }}
                        </view>
                        <view class="fl-info"> {{ item.note || '' }} </view>
                      </view>
                      <view class="fl-i-art">
                        <view v-if="flArticleList.length > 0" class="fl-i-a-item" @click="showFlProductArticle"
                          >服务介绍</view
                        >
                        <view v-if="hasPhysicalExamination" class="fl-i-a-item" @click="gotoReportList">评估报告</view>
                      </view>
                    </view>
                  </view>

                  <view v-if="inserviceInfo.orderStatus === 3" class="fl-btn" @click="startReport">开始评估</view>
                </view>
              </view>
              -->
            </view>
          </view>
        </view>
        <!-- 服务效期 -->
        <view class="service-info">
          <view class="title">
            <view>服务时间</view>
            <view class="cut-line"></view>
          </view>
          <view class="info">
            <view>服务效期</view>
            <view
              >{{ inserviceInfo.serviceStartDate | formatDate }} - {{ inserviceInfo.serviceEndDate | formatDate }}</view
            >
          </view>
          <view v-if="inserviceInfo.orderStatus === 4 || inserviceInfo.orderStatus === 6" class="info">
            <view>实际终止日期</view>
            <view>{{ inserviceInfo.terminationDate | formatDate }}</view>
          </view>
        </view>

        <!-- 服务缴费 -->
        <!-- <view class="service-info">
          <view class="title">
            <view>服务缴费</view>
            <view class="cut-line"></view>
          </view>
          <view class="info">
            <view>缴费金额</view>
            <view>￥{{ (inserviceInfo.amount / 100).toFixed(2) }}</view>
          </view>
          <view class="info">
            <view>缴费方式</view>
            <view>{{ inserviceInfo.payWay | getPayWay }}</view>
          </view>
        </view> -->

        <!-- 系统信息 -->
        <view class="service-info">
          <view class="title">
            <view>系统信息</view>
            <view class="cut-line"></view>
          </view>

          <view class="info">
            <view>服务编号</view>
            <view>{{ inserviceInfo.orderNo }}</view>
          </view>
          <view class="info">
            <view>创建时间</view>
            <view>{{ inserviceInfo.createInfo.createDate }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
// 服务页接口  获取当前用户的服务订单
import {
  getInserviceInfoByOrderId,
  getInsureDetail,
  existEstimatedOrder,
  getPatientInfo,
  ingoreFirstExistEstimatedOrder,
  getLastDeliveryTime,
  getpayNum
} from '@/api/service.js';

import { isPhysicalExamination } from '@/api/index.js';
import { inquiryMixin } from '@/common/mixin.js';

// 引入统计
import { tongji } from '@/utils/tools.js';

export default {
  filters: {
    getOrderStatusName(key) {
      let orderKeyValue = {
        2: '待激活',
        3: '服务中',
        4: '已完成',
        6: '已终止'
      };
      return orderKeyValue[key] || '未知';
    },
    getPayWay(val) {
      return val === 1 ? '年缴' : '月缴';
    },
    formatDate(val) {
      if (val) {
        let tempDate = new Date(val);
        return tempDate.getFullYear() + '年' + (tempDate.getMonth() + 1) + '月' + tempDate.getDate() + '日';
      } else {
        return '';
      }
    }
  },
  mixins: [inquiryMixin],
  data() {
    return {
      // adownPng: adownPng,
      patientId: '',
      popArticleList: [], // 弹窗文档列表
      popArticleListIsShow: false, // 是否显示
      articleDetailIsShow: false,
      packageProduct: [], //  用户服务单下的服务产品列表
      receiverAddress: [], // 当前用户收货地址
      regularMedicationInfo: null, // 会员三定信息
      flArticleList: [], // 健管健教 产品文档
      hasEstimatedOrder: false, // 是否存在三定订单
      inserviceInfo: {},
      lastDeliveryTime: '', // 用户最后一个有效订单的配送时间
      pkg: {
        user: {
          name: '',
          goods: ''
        },
        info: {
          name: '',
          dc: '',
          ts: '',
          peroidStart: '',
          peroidEnd: ''
        }
      },
      personLogo:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/service/person.png',
      hasPhysicalExamination: false, // 是否有健康评估报告
      patientInfo: {},
      userInfo: {},
      orderId: '',
      serviceStatusColor: {
        2: '#FFBE00',
        3: '#8ED7B1',
        4: '#F25559',
        6: '#F34E1C'
      },
      hasCommitDrugInfo: false,
      isPay: 0, // 判断是否支付(根据后端返回数组的长度判断)
      surplusTime: false, // 过期时间
      showActiveBtn: false
    };
  },
  onLoad(option) {
    // 获取服务单id
    if (option && option.orderId && option.patientId) {
      this.orderId = option.orderId;
      this.patientId = option.patientId;
      // 当前用户姓名
      this.initData();
      // this.init(option.orderId, option.patientId);
    }
  },
  onShow() {
    // eslint-disable-next-line
    let pagearr = getCurrentPages();
    let currentPage = pagearr[pagearr.length - 1];
    let options = currentPage.options;
    this.orderId = options.orderId;
    this.patientId = options.patientId;
    this.init(options.orderId, options.patientId);
  },

  computed: {
    drugPackageProduct() {
      return this.packageProduct.filter((item) => {
        return item.productType === 8;
      });
    },
    healthPackageProduct() {
      return this.packageProduct.filter((item) => {
        return item.productType === 3;
      });
    },

    // 是否展示登记保险按钮
    showInsuranceButton() {
      return function (inserviceInfo) {
        return (
          (inserviceInfo.orderStatus === 2 || inserviceInfo.orderStatus === 3) &&
          (inserviceInfo.payStatus === 1 || inserviceInfo.amount === 0) &&
          inserviceInfo.healthEnquiries &&
          inserviceInfo.healthEnquiries.length === 0 &&
          inserviceInfo.needInquiry
        );
      };
    }
  },

  methods: {
    initData() {
      this.popArticleTitle = ''; // 文档列表弹窗标题
      this.popArticleList = []; // 弹窗文档列表
      this.packageProduct = []; //  用户服务单下的服务产品列表
      this.receiverAddress = []; // 当前用户收货地址
      this.regularMedicationInfo = null; // 会员三定信息
      this.flArticleList = []; // 健管健教 产品文档
      this.hasEstimatedOrder = false; // 是否存在三定订单
      this.hasPhysicalExamination = false; // 是否有健康评估报告
      this.patientInfo = {};
      this.orderId = '';
      this.inserviceInfo = {};
      this.lastDeliveryTime = {};
    },
    link(id) {
      this.$wxPromise.navigateTo({
        url: '/pages/agreementReading/index?articleId=' + id
      });
    },
    lookArticle(data) {
      if (data.articleId && data.name) {
        this.link(data.articleId);
        return false;
      }
      // 外链
      const links = data.externalLink;
      let externalLinkDomain = links.split('/')[2].split('.').join('');
      uni.navigateTo({
        url: `pages/view/outer-view?externalLinkDomain=${externalLinkDomain}&url=${links}`
      });
    },

    showServiceList(title, articleList) {
      this.$store.commit('service/SET_SERVICE_TITLE', title);
      this.$store.commit('service/SET_SERVICE_ARTICLELIST', articleList);
      // 显示服务列表页
      this.$wxPromise.navigateTo({
        url: `/pages/service/agreeList`
      });
    },
    showAllProductsTitle(inserviceInfo) {
      let temp = false;
      if (inserviceInfo) {
        for (let item of inserviceInfo.orderProduct) {
          if (item.productType === 1 || item.productType === 8 || item.productType === 3) {
            temp = true;
            break;
          }
        }
      }
      return temp;
    },
    init(orderId, patientId) {
      // 获取服务单详情 /patients/insurance_order/
      function getTeamOrderStatusNameObj(inserviceInfo) {
        if (inserviceInfo.teamOrderStatus === 0 && inserviceInfo.healthEnquiries.length > 0) {
          return '投保中';
        } else {
          let teamOrderStatusNameObj = {
            0: '待激活',
            1: '已承保',
            3: '已完成',
            4: '已承保', // 实际为待退保
            5: '已退保',
            8: '投保失败',
            9: '已撤单',
            10: '已出险'
          };
          return teamOrderStatusNameObj[inserviceInfo.teamOrderStatus];
        }
      }

      getInserviceInfoByOrderId(orderId).then(async (res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取详情失败' });
          return;
        }
        let inserviceInfo = res.data;
        // 购买人姓名

        let pkgArticleList = [];
        // 保险包附件文档列表
        if (inserviceInfo.packageProduct) {
          // 服务产品取的是packageProduct   服务包取的是insurancePackageSpecs
          inserviceInfo.packageProduct.forEach((pro) => {
            if (pro.productType === 1) {
              inserviceInfo.npackageName = pro.productName;
              if (pro.productSpecs) {
                pro.productSpecs.forEach((spe) => {
                  if (spe.type === 1 || spe.type === 2 || spe.type === 3) {
                    pkgArticleList.push(spe);
                  }
                });
              }
            }
          });
        }
        let inserviceArticleList = [];
        // 获取服务包协议insurancePackageSpecs
        if (inserviceInfo.insurancePackageSpecs) {
          inserviceInfo.insurancePackageSpecs.forEach((item) => {
            // 会员服务协议
            if (item.type === 7) {
              inserviceArticleList.push(item);
            }
          });
        }

        // 判断是否有保险订单，有保险订单再执行获取等待期和问询的操作
        let hasInsure = inserviceInfo.orderProduct.some((item) => {
          return item.productType === 1;
        });

        if (hasInsure) {
          // 如果存在保单开始时间，则说明该服务单含有保险，且有保险等待期。如果服务单不含保险，getInsureDetail获取等待期会报错
          let insureResult = await getInsureDetail(orderId);
          if (inserviceInfo.startDate) {
            // 获取保险包等待期
            if (insureResult.code !== 0) {
              // uni.showModal({
              //   title: '提示',
              //   content: '获取保障详情失败'
              // });
              return;
            }
            // 等待期
            let delayDays = insureResult.data.delayDays || 0;
            // 保单开始时间，保单结束时间
            let dayTimes = 24 * 60 * 60 * 1000;
            let startDate =
              new Date(inserviceInfo.startDate.replace(new RegExp(/-|\./gm), '/')).getTime() + delayDays * dayTimes;

            let tempEndDate = new Date(inserviceInfo.endDate.replace(new RegExp(/-|\./gm), '/'));
            tempEndDate.setFullYear(tempEndDate.getFullYear() + 2);

            let endDate = tempEndDate.getTime() - Number(dayTimes);
            let now = new Date();
            let localDate = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate();
            let nowDate = new Date(localDate);
            let isInProduct = nowDate >= startDate && nowDate <= endDate;

            // 1是已承保，3已完成
            if (
              inserviceInfo.teamOrderStatus === 1 ||
              ((inserviceInfo.teamOrderStatus === 3 || inserviceInfo.teamOrderStatus === 5) && isInProduct)
            ) {
              // 服务中
              inserviceInfo.showApplyBtn = true;
            }
          }
          // 是否有问询
          inserviceInfo.healthEnquiries = insureResult.data.healthEnquiries || [];
          // 设置保险订单状态名称
          inserviceInfo.teamOrderStatusName = getTeamOrderStatusNameObj(inserviceInfo);
        }

        inserviceInfo.pkgArticleList = pkgArticleList;
        inserviceInfo.inserviceArticleList = inserviceArticleList;
        this.inserviceInfo = inserviceInfo;
        this.countTime(); // 支付倒计时
      });

      // 获取用户最后一个有效订单的配送时间
      getLastDeliveryTime(this.patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取会员信息失败'
          });
        } else {
          this.lastDeliveryTime = res.data;
        }
      });

      // 获取是否有三定订单
      this.getEstimatedOrderInfo(this.patientId);
      // 判断是否提交过三定用药信息
      // this.getCommitDrugInfo(this.patientId);
      // 获取会员信息
      getPatientInfo(this.patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取会员信息失败'
          });
        } else {
          this.patientInfo = res.data;
        }
      });
      // 判断健管健教是否有服务文档
      this.checkFlProductArticle();
      this.getIsPhysicalExamination();
    },
    getIsPhysicalExamination() {
      // 一定天数内是否有健康评估当然
      isPhysicalExamination(this.patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取是否有健康评估档案出错'
          });
        } else {
          this.hasPhysicalExamination = res.data;
        }
      });
    },
    gotoReportList(item) {
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessSick/assessHistoryListPage?patientId=' + this.patientId
      });
      this.$store.commit('assessQuestion/SET_ASSESSPATIENTID', this.patientId);
    },
    startReport() {
      // 友盟
      tongji('517beaa9-c538-47cb-aab7-5fb8098bd647');
      // 跳转到评估报告列表页
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessSick/index?patientId=' + this.patientId
      });
    },

    apply3d(item) {
      // 申请开通3定
      this.$wxPromise.navigateTo({
        url: '/pages/deliveryService/index?insuredPatientId=' + this.patientId + '&orderId=' + this.orderId
      });
    },
    getEstimatedOrderInfo(patientId) {
      ingoreFirstExistEstimatedOrder(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取三定信息失败'
          });
        } else {
          this.hasCommitDrugInfo = res.data;
          // 如果返回ture，则接着判断
          if (res.data) {
            existEstimatedOrder(patientId).then((res) => {
              if (res.code !== 0) {
                uni.showModal({
                  title: '提示',
                  content: '获取三定信息失败'
                });
              } else {
                this.hasEstimatedOrder = res.data;
                // 判断三定用药是否支付
                getpayNum(this.patientId).then((res) => {
                  this.isPay = res || [];
                });
              }
            });
          }
        }
      });
    },
    // 判断是否提交了用药信息 true为提交过用药信息，false为没有提交过用药信息
    getCommitDrugInfo(patientId) {
      ingoreFirstExistEstimatedOrder(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showModal({
            title: '提示',
            content: '获取三定信息失败'
          });
        } else {
          this.hasCommitDrugInfo = res.data;
        }
      });
    },
    async checkInsureCertificate(checkInsureCertificate) {
      // 查看保险凭证
      getInsureDetail(this.orderId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({
            title: '获取保障详情失败'
          });
        }
        this.$wxPromise.navigateTo({
          url: '/pages/view/web-view?url=' + res.data.pdfUrl
        });
      });
    },
    serviceDays(orderDate) {
      let days =
        Math.floor((new Date() - new Date(orderDate.replace(new RegExp(/-|\./gm), '/'))) / (24 * 60 * 60 * 1000)) || 0;
      if (days < 0) {
        days = 0;
      }
      return days;
    },
    showServiceArticleList(item) {
      if (item.inserviceArticleList.length) {
        // 显示服务详情列表
        this.popArticleList = item.inserviceArticleList;

        // this.popArticleListIsShow = true;
        this.showServiceList('服务条款', this.popArticleList);
      } else {
        uni.showModal({
          title: '提示',
          content: '该服务包暂无服务协议'
        });
      }
    },
    closeServiceArticleList() {
      this.popArticleList = [];
      this.popArticleListIsShow = false;
    },

    // 保险文章列表
    showInsureArticleList(item) {
      this.showServiceList('保险协议', item.pkgArticleList);
    },
    closeArticleDetail() {
      this.articleDetailIsShow = false;
      // 隐藏列表
      this.popArticleListIsShow = true;
    },
    goServiceOrderDetailPage(item) {
      this.$store.commit('join/SET_COMMUNITYSERVICEID', item.packageId);
      this.$wxPromise.navigateTo({
        url: `/pagesC/service/detail?id=${item.packageId}`
      });
      // 跳转至服务单详情页面
      // this.$wxPromise.navigateTo({
      //   url: '/pages/service/introduce?insurancePackageId=' + item.packageId
      // });
    },

    // 支付
    async handleService(order) {
      this.$wxPromise.navigateTo({
        url: '/pagesC/pay/index?orderId=' + order.orderId
      });
    },

    // 去激活（问询）
    beActive(inserviceInfo) {
      this.inquiryMixin({
        insuranceServices: inserviceInfo.orderProduct,
        teamOrderNo: inserviceInfo.teamOrderNo,
        insuredId: inserviceInfo.insured.insuredId,
        packageId: inserviceInfo.packageId,
        orderId: inserviceInfo.orderId
      });
    },

    checkInsure() {
      uni.showToast('跳保险订单');
    },
    applyInsureMoney(item) {
      // 友盟
      tongji('f9809a46-f71d-434a-839c-8bb100401443');
      // 领取保障金
      this.$wxPromise.navigateTo({
        url: `/pages/getWelfareGold/index?patientId=${item.insured.insuredId}`
      });
    },

    goIllForm() {
      this.$wxPromise.navigateTo({
        url: '/pages/getWelfareGold/illnessForm'
      });
    },

    chagneRegularMedicationInfo() {
      // 友盟
      tongji('25298928-b5cb-4cc2-922f-097f0c1a5d02');
      // 修改三定申请
      this.$wxPromise.navigateTo({
        url: '/pages/confirmAppointment/index?insuredPatientId=' + this.patientId + '&orderId=' + this.orderId
      });
      uni.setStorageSync('insuredPatientId', this.patientId);
    },
    checkRegularMedicationInfo() {
      // 跳转到查看药品记录页面
      this.$wxPromise.navigateTo({
        url: '/pages/drugOrder/index?patientId=' + this.patientId
      });
    },
    changeReplay() {
      uni.showToast({
        title: '修改申请'
      });
    },
    checkFlProductArticle() {
      // 查看健管健教类产品文档
      // 获取产品文档
      if (this.orderId) {
        getInserviceInfoByOrderId(this.orderId).then((res) => {
          if (res.code !== 0) {
            uni.showModal({
              title: '提示',
              content: '获取产品文档失败'
            });
          } else {
            this.flArticleList = [];
            // 一个服务包下有多个产品服务，产品没说取那个，咱也不敢问，问了就被怼，暂时取第一个，提bug了再修复
            let packageProduct = res.data.packageProduct;
            packageProduct.forEach((pro) => {
              // 健管健教类
              if (pro.productType === 3) {
                pro.productSpecs.forEach((spe) => {
                  if (spe.type === 5) {
                    this.flArticleList.push(spe);
                  }
                });
              }
            });
          }
        });
      }
    },
    showFlProductArticle() {
      this.showServiceList('服务介绍', this.flArticleList);
    },

    // 倒计时
    countTime() {
      let createtime = new Date(this.inserviceInfo.createInfo.createDate.replace(new RegExp(/-|\./gm), '/')).getTime();
      let expiredTime = createtime + 86400000;
      if (new Date().getTime() > expiredTime) {
        this.surplusTime = false;
      } else {
        setInterval(() => {
          let surplusTime = parseInt(expiredTime / 1000, 10) - parseInt(new Date().getTime() / 1000, 10);
          let h = parseInt((surplusTime / (60 * 60)) % 24, 10);
          if (h < 10) {
            h = '0' + String(h);
          }
          let m = parseInt((surplusTime / 60) % 60, 10);
          if (m < 10) {
            h = '0' + String(m);
          }

          let s = parseInt(surplusTime % 60, 10);
          if (s < 10) {
            s = '0' + String(s);
          }

          this.surplusTime = `${h}:${m}:${s}`;
        }, 1000);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  margin-top: -5rpx;
  margin-left: -5rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  .family {
    width: 100%;
    height: 400rpx;
    padding: 54rpx 40rpx 0rpx;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: scroll;
    background: linear-gradient(184deg, #fb6f6f 0%, #f63434 100%);
    box-sizing: border-box;
    .f-inner {
      display: flex;
      align-items: center;
      width: max-content;
      padding-right: 80rpx;
      .f-item {
        width: 96rpx;
        height: 144rpx;
        margin-right: 40rpx;
        position: relative;
        .f-logo {
          width: 96rpx;
          height: 96rpx;
          background: #e5edfe;
          border-radius: 16rpx;
          padding: 8rpx;
          box-sizing: border-box;
          overflow: hidden;
          &.f-logo0 {
            background: none;
            border-radius: 16rpx;
            padding: 0;
          }
          image {
            width: 100%;
            height: 100%;
          }
        }
        .f-name {
          width: 100%;
          text-align: center;
          margin-top: 20rpx;
          font-size: 28rpx;
          color: rgba(255, 255, 255, 0.6);
          &.active {
            color: white;
          }
        }
        .f-san {
          width: 0rpx;
          height: 0rpx;
          left: 28rpx;
          border-bottom: 20rpx solid white;
          border-left: 20rpx solid transparent;
          border-right: 20rpx solid transparent;
          position: absolute;
          bottom: -2rpx;
        }
      }
      .f-add {
        width: 96rpx;
        height: 144rpx;
        margin-right: 40rpx;
        .f-a-btn {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          text-align: center;
          width: 96rpx;
          height: 96rpx;
          line-height: 96rpx;
          color: white;
          font-size: 72rpx;
          position: relative;
          image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 64rpx;
            height: 64rpx;
            transform: translate(-50%, -50%);
          }
        }
        .f-name {
          text-align: center;
          width: 100%;
          margin-top: 20rpx;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
  }
  .cut-line {
    content: '';
    width: 654rpx;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid #e8e8e8;
    position: absolute;
    bottom: 0;
    height: 0px;
  }
  // 服务包样式
  .order-wrap {
    background: #f4f4f4;
    width: 100%;
    margin: auto;
    border-radius: 24rpx;
    padding-bottom: 24rpx;
    min-height: 300rpx;
    position: relative;
    .o-bg {
      position: absolute;
      width: 100%;
      height: 120rpx;
      background: #f96a6a;
      top: 0px;
      left: 0px;
    }
  }
  .order {
    padding-top: 30rpx;
    .pkg {
      width: 700rpx;
      margin: auto;
      position: relative;
      background: white;
      border-radius: 24rpx;
      padding-bottom: 52rpx;
      .p-user {
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 24rpx;
        box-sizing: border-box;
        .p-u-logo {
          width: 40rpx;
          height: 40rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .p-u-name {
          margin-left: 12rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.55);
        }
      }
      .p-info {
        padding: 0rpx 24rpx;
        background-position: 400rpx 40rpx;
        background-repeat: no-repeat;
        box-sizing: border-box;
        .p-i-name-w {
          width: 100%;
          .p-i-name {
            font-size: 40rpx;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.9);
          }
          .p-i-status {
            margin-left: 16rpx;
            border-radius: 8rpx;
            font-size: 24rpx;
            font-weight: 400;
            padding: 4rpx 10rpx;
            color: white;
            height: 32rpx;
            line-height: 32rpx;
          }
        }
        .p-i-detail {
          margin-top: 24rpx;
          .p-i-level,
          .p-i-time {
            padding: 0rpx 12rpx;
            height: 40rpx;
            background: #f7dcdd;
            border-radius: 8rpx;
            line-height: 40rpx;
            display: inline-block;
            color: #f34e1c;
            font-size: 24rpx;
          }
          .p-i-time {
            margin-left: 16rpx;
          }
        }
        .p-i-peroid {
          margin-top: 24rpx;
          font-size: 24rpx;
          color: rgba(0, 0, 0, 0.55);
          display: flex;
        }

        .p-i-art {
          font-size: 26rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20rpx;
          .p-i-a-item {
            display: inline-block;
            color: #2680eb;
            opacity: 1;
            margin-right: 36rpx;
          }
        }
        .p-i-pay {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20rpx;
          .p-i-p-tip {
            width: 360rpx;
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.55);
            .p-i-time {
              color: #f34e1c;
            }
          }
          .p-i-btn {
            text-align: center;
            width: 160rpx;
            height: 56rpx;
            border: 1px solid #f34e1c;
            border-radius: 28rpx;
            line-height: 56rpx;
            font-size: 24rpx;
            color: #f34e1c;
            text-align: center;
          }
        }
        .p-i-active {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .p-i-p-tip {
            width: 360rpx;
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.55);
            .p-i-time {
              color: #f34e1c;
            }
          }
          .p-i-btn {
            text-align: center;
            width: 160rpx;
            height: 56rpx;
            border: 1px solid #f34e1c;
            border-radius: 28rpx;
            line-height: 56rpx;
            font-size: 24rpx;
            color: #f34e1c;
            text-align: center;
          }
        }
      }
    }
  }

  .order-checkpro-btn {
    margin-top: 48rpx;
    font-size: 24rpx;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
  }
  .order-line {
    position: relative;
    width: 654rpx;
    height: 0rpx;
    border-top: 1rpx solid #e8e8e8;
    margin: auto;
    z-index: 1;
    height: 48rpx;
    margin-top: 48rpx;
    .o-l-left {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      background: $uni-bg-color;
      position: absolute;
      left: -48rpx;
      top: 24rpx;
      top: -24rpx;
    }
    .o-line {
    }
    .o-l-right {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      right: -48rpx;
      top: 24rpx;
      background: $uni-bg-color;
      position: absolute;
      top: -24rpx;
    }
  }
  .order-arrow {
    width: 48rpx;
    height: 48rpx;
    margin: auto;
    margin-bottom: 48rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .products {
    background: #ffffff;
    border-radius: 16rpx;
    width: 700rpx;
    margin: auto;
    margin-top: 24rpx;
    padding-bottom: 20rpx;
  }

  .g-title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
    opacity: 1;
    margin: auto;
    width: 700rpx;
    padding: 28rpx 24rpx 18rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
    position: relative;
    font-weight: 600;
  }
  .goods {
    position: relative;
    padding: 24rpx 0rpx;
    width: 654rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    position: relative;
    margin: auto;
    margin-bottom: 24rpx;
    .g-info {
      .g-i-name {
        font-size: 32rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        .g-i-name-statusName {
          background: #f25559;
          margin-left: 5rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 10rpx;
          color: white;
          height: 32rpx;
          line-height: 32rpx;
          word-break: keep-all;
        }
      }
      .g-i-com {
        width: 248rpx;
        margin-top: 24rpx;
        height: 40rpx;
        border: 1px solid #f34e1c;
        border-radius: 8rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        color: #f34e1c;
      }
      .g-i-peroid {
        display: flex;
        margin-top: 24rpx;
        font-size: 26rpx;
        color: rgba(0, 0, 0, 0.3);
        .g-i-p-start {
        }
        .g-i-p-start {
        }
      }
      .g-i-art {
        display: flex;
        margin-top: 24rpx;
        font-size: 26rpx;
        .g-i-a-item {
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
    }
    .g-apply {
      position: absolute;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 24rpx;
      right: 0rpx;
      width: 160rpx;
      height: 56rpx;
      border: 1px solid #f34e1c;
      border-radius: 32rpx;
      text-align: center;
      font-size: 24rpx;
      line-height: 56rpx;
      color: #f34e1c;
    }
  }
  .medicine {
    width: 654rpx;
    margin: auto;
    box-sizing: border-box;
    padding: 24rpx 0rpx;
    display: flex;
    align-items: center;
    border-radius: 16rpx;
    position: relative;
    margin-bottom: 24rpx;
    .m-left {
      // width: 400rpx;
      .m-title {
        font-size: 32rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
      }
      .m-hz {
        margin-top: 24rpx;
        font-size: 26rpx;
        color: rgba(0, 0, 0, 0.3);
        display: flex;
        width: 480rpx;
      }
      .m-i-art {
        margin-top: 24rpx;
        font-size: 26rpx;
        .m-i-a-item {
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
          display: inline-block;
        }
      }
    }
    .m-right {
      position: absolute;
      width: 160rpx;
      height: 56rpx;
      right: 0rpx;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 24rpx;
      border: 1px solid #f34e1c;
      border-radius: 28rpx;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #f34e1c;
      text-align: center;
    }
  }

  .fl-list {
    width: 654rpx;
    box-sizing: border-box;
    padding: 24rpx 0rpx;
    margin: auto;
    border-radius: 16rpx;
    .fl-item {
      width: 100%;
      align-items: center;
      position: relative;
      .fl-logo {
        width: 80rpx;
        height: 80rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .fl-con {
        width: 480rpx;
      }
      .fl-des {
        text-align: left;

        .fl-name {
          font-size: 32rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.9);
        }
        .fl-info {
          font-size: 24rpx;
          color: rgba(12, 6, 6, 0.3);
          margin-top: 16rpx;
        }
      }
      .fl-i-art {
        display: flex;
        margin-top: 24rpx;
        font-size: 26rpx;
        .fl-i-a-item {
          display: inline-block;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
      .fl-btn {
        position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        bottom: 0rpx;
        right: 0rpx;
        align-self: flex-end;
        width: 160rpx;
        height: 56rpx;
        border: 1px solid #f34e1c;
        border-radius: 28rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        color: #f34e1c;
        text-align: center;
      }
    }
  }
  .his {
    margin-top: 44rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
    padding-bottom: 44rpx;
  }
  .serviceArticleList {
    // 显示服务详情列表
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
    .s-inner {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 10;
      width: 700rpx;
      height: 90%;
      padding: 0rpx 40rpx 32rpx;
      box-sizing: border-box;
      background: white;
      border-radius: 24rpx;
      .s-header {
        width: 100%;
        height: 120rpx;
        line-height: 120rpx;
        position: relative;
        .s-title {
          font-size: 36rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          text-align: center;
        }
        .s-icon {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          right: 0;
          top: 40rpx;
        }
      }
      .s-cont {
        .s-c-item {
          height: 60rpx;
          line-height: 60rpx;
          color: #2680eb;
        }
      }
    }
  }
  .service-info {
    width: 700rpx;
    margin: auto;
    background: #ffffff;
    border-radius: 16rpx;
    margin-top: 24rpx;
    padding: 28rpx 23rpx;
    box-sizing: border-box;
    position: relative;
    .title {
      width: 100%;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
      padding-bottom: 28rpx;
      position: relative;
      font-weight: 600;
    }
    .info {
      margin-top: 40rpx;
      width: 100%;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.55);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.nppackageNameCss {
  padding: 0rpx 24rpx;
  margin: 24rpx 0rpx 12rpx;
  font-weight: bold;
}
.pro-article {
  padding: 0rpx 24rpx;
  color: #2680eb;
  font-size: 26rpx;
}
</style>
